<template>
  <div class="fieldList">
    <el-card >
    <el-table 
    ref="dragTable"
    
    :data="userTable" style="width: 100%">
    <el-table-column type="index" label="序号" width="60"></el-table-column>
    <el-table-column prop="field"  label="字段列名">
    
    </el-table-column>
        <el-table-column prop="label" label="字段描述">

    </el-table-column>
     <el-table-column prop="prop" label="列表字段" >
   
    </el-table-column>
     <el-table-column prop="label" label="表单组件">
    <template #default="scope">
        <el-select v-model="scope.row.componentName">
                
                <el-option
                v-for="item in compontent.children"
                 :key="item.value" 
                 :label="item.title" 
                 :value="item.componentName" />
              </el-select>
      </template>
    </el-table-column>
     <el-table-column prop="label" label="增加">
    <template #default="scope">
       <el-checkbox label="" :true-value="true"
       :false-value="false"
        v-model="scope.row.isAdd"></el-checkbox>
      </template>
    </el-table-column>
     <el-table-column prop="label" label="编辑">
    <template #default="scope">
       <el-checkbox label="" :true-value="true"
       :false-value="false"
        v-model="scope.row.isEdit"></el-checkbox>
      </template>
    </el-table-column>
  </el-table>
  <div class="aic jcc mt20">
     <el-button type="primary" @click="handleDesign">下一步 去设计</el-button>
  </div>
  </el-card>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, shallowRef, toRaw, nextTick } from "vue";
import {
userTableFields,
} from '../mock/index'
import { loadAsyncComponent } from "/@ts/plugins/components";
import { useRouter, useRoute} from "vue-router";
import { routerOpenPage } from "/@ts/hooks/route";
import {

  compontent,
} from "element-easy-form";
const userTable = ref(userTableFields);
const draggingIndex = shallowRef(null); // 记录拖拽行的索引
  // 项目列表数据
const dragTable = ref()
const state = reactive({});
const isShow = shallowRef(false);
const handleDesign = () =>{

routerOpenPage({
   path: '/moduleDesign/121212',
})
}
        const handleSave = () =>{
        }
onMounted(() => {
});
</script>

<style scoped lang="scss">
.fieldList{
}
</style>
